<template>
  <div class="project_data">
    <div v-for="(item,index) in projectData" :key="index" class="project_data_each">
      <div class="content">
        <svg-icon :icon-class="item.svg" class="svgIcon" />
        <div class="content_data">
          <div v-if="item.unit" class="content_data_num">{{ item.num && AmountSlite(item.num) || 0 }}</div>
          <div v-else class="content_data_num">{{ item.num && item.num.toFixed(2) || 0 }}%</div>
          <div class="content_data_title">{{ item.title }}</div>
        </div>

      </div>
      <div v-if="item.unit" class="unit">单位 :<span>万元</span></div>
    </div>
  </div>
</template>

<script>
import { AmountSlite } from '@/utils/utils';
export default {
  name: 'ProjectData',
  props: {
    projectData: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {

    };
  },
  methods: {
    AmountSlite
  }
};
</script>

<style lang='scss' scoped>
  .project_data{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    .project_data_each{
      width: calc(50% - 12.5px);
      height: calc(50% - 12px);
      background-color: #fff;
      position: relative;
      &:nth-child(1), &:nth-child(3){
        margin-right: 25px;
      }
      &:nth-child(3), &:nth-child(4){
        margin-top: 24px;
      }
      .unit{
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #999999;
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 6px 10px;
        >span{
          padding-left: 8px;
        }
      }
      .content{
        height: 100%;
        display: flex;
        padding: 0 20px;
        // justify-content: center;
        // justify-content: space-around;
        align-items: center;
        .svgIcon{
          width: 56px;
          height: 56px;
        }
        .content_data{
          padding-left: 20px;
          flex: 1;
          .content_data_num{
            font-size: 40px;
            font-family: Arial, Arial-Black;
            font-weight: 900;
            color: #faad14;
          }
          .content_data_title{
            font-size: 22px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }
  }
</style>
